<!--suppress ALL -->
<template>
    <div>
        <van-cell-group>
            <van-field v-model="form.name" label="标题：" placeholder="XXX招XXX"><van-icon slot="icon" name="edit"></van-icon></van-field>
            <van-field v-model="cityArr" label="发布职位：" placeholder="点击选择发布职位" readonly
                       @click="openWorkerTypePopup()"><van-icon slot="icon" name="edit"></van-icon></van-field>
            <van-popup v-model="showWorkTypePopup" position="bottom" :close-on-click-overlay="false">
                <van-button type="primary" size="large" @click.stop="saveWorkType">确认</van-button>
                <van-row>
                    <van-col span="14">
                        <van-checkbox-group v-model="form.workType">
                            <van-cell-group>
                                <van-cell
                                        v-for="(item, index) in workType"
                                        clickable
                                        :key="item"
                                        :title="`${item}`"
                                        @click="  toggleWorkType(index)"
                                >
                                    <van-checkbox :name="item" ref="workTypeCheckboxes"/>
                                </van-cell>
                            </van-cell-group>
                        </van-checkbox-group>
                    </van-col>
                    <van-col span="10">
                        <van-cell-group>
                            <van-field ref="workCount" v-for="(item, index) in workCountAyy"
                                       v-model="workCountAyy[index]" label="人数："
                                       :value="workCountAyy[index]"
                                       :name="item+''+index"></van-field>
                        </van-cell-group>
                    </van-col>
                </van-row>
            </van-popup>
            <van-field v-model="form.contactsMan" label="联系人姓名：" placeholder="请输入联系人姓名"><van-icon slot="icon" name="edit"></van-icon></van-field>
            <van-field v-model="form.contactsPhone" label="联系方式：" placeholder="请输入联系人联系方式"><van-icon slot="icon" name="edit"></van-icon></van-field>
            <van-field v-model="form.companyId" label="企业ID：" readonly />
            <van-field v-model="position" label="企业所在地：" readonly />
            <!--<van-popup v-model="showPopup" position="bottom" :close-on-click-overlay="false">-->
            <!--<van-picker ref="provinces" :show-toolbar="true" @confirm="confirm" @cancel="cancel"-->
            <!--:columns="provinces"-->
            <!--@change="onProvinceChange"/>-->
            <!--</van-popup>-->
            <van-field type="textarea" label="备注：" v-model="form.description">
                <van-icon slot="icon" name="edit"></van-icon>
            </van-field>
            <h1></h1>
            <van-button type="warning" size="large" @click="save('form')">编辑保存</van-button>
        </van-cell-group>
    </div>
</template>
<script>
    import {
        CellGroup,
        Field,
        RadioGroup,
        Radio,
        Cell,
        Button,
        Picker,
        Checkbox,
        CheckboxGroup,
        Toast,
        Popup,
        Collapse,
        CollapseItem,
        Row,
        Col,
        Icon
    } from 'vant';
    import http from '../../common/http';

    export default {
        name: "editJobInfo",
        components: {
            [CellGroup.name]: CellGroup,
            [Field.name]: Field,
            [RadioGroup.name]: RadioGroup,
            [Radio.name]: Radio,
            [Cell.name]: Cell,
            [Button.name]: Button,
            [Picker.name]: Picker,
            [Checkbox.name]: Checkbox,
            [CheckboxGroup.name]: CheckboxGroup,
            [Toast.name]: Toast,
            [Popup.name]: Popup,
            [Collapse.name]: Collapse,
            [CollapseItem.name]: CollapseItem,
            [Row.name]: Row,
            [Col.name]: Col,
            [Icon.name]: Icon,

        },
        data() {
            return {
                form: {
                    name: '',
                    workType: [],
                    workCount: [],
                    companyId: '',
                    description: '',
                    province: '',
                    city: '',
                    area: '',
                    contactsMan: '',
                    contactsPhone: ''
                },
                workCountAyy: [],
                workType: [],
                cityArr: '',
                position: '',
                provincesData: null,
                workCount: [],
                provinces: [
                    {
                        values: [],
                        className: 'column1'
                    },
                    {
                        values: [],
                        className: 'column2',
                        defaultIndex: 2
                    },
                    {
                        values: [],
                        className: 'column3',
                        defaultIndex: 2
                    }
                ],
                showWorkTypePopup: false,
                isFirst: true,
                company: '',
            }
        },
        created() {
            this.$parent.title = '编辑招工信息';
            this.getProvince();
        },
        methods: {
            renderData() {
                let params = this.$router.history.current.params;
                console.log(params);
                if (JSON.stringify(params) === '{}') {
                    this.$router.push({path: '/checkJobInfo'});
                } else {
                    Object.assign(this.form, params);
                    this.renderPosition();
                    this.renderWorkType();

                }
            },
            getProvince() { //省市区
                http.getUserJsonData(`/user/job/get`, {}, (data) => {
                    console.log('走了这里', data)
                    this.provincesData = data.provinces;
                    this.workType = data.workType;
                    let arr = new Array(this.workType.length).fill(1)
                    this.workCountAyy = arr;
                    this.renderData();
                });
            },
            onProvinceChange(picker, values, index) {
                if (index == 0) {
                    picker.setColumnValues(1, Object.keys(this.provincesData[values[0]]));
                    picker.setColumnValues(2, this.provincesData[values[0]][picker.getColumnValue(1)]);
                }
                if (index == 1) {
                    picker.setColumnValues(2, this.provincesData[values[0]][values[1]]);
                }
            },
            save(name) {
                let _id = localStorage.getItem('_id');
                let token = localStorage.getItem('token');
                let params = {
                    _id: _id ? _id : http._id,
                    token: token ? token : http.token,
                    name: this.form.name,
                    workType: this.form.workType.join(','),
                    workCount: this.form.workCount.join(','),
                    province: this.form.province,
                    city: this.form.city,
                    area: this.form.area,
                    description: this.form.description,
                    companyId: this.form.companyId,
                    contactsMan: this.form.contactsMan,
                    contactsPhone: this.form.contactsPhone
                };
                if (!this.form.name || !this.form.companyId || !this.form.workType || !this.form.contactsMan || !this.form.contactsPhone) {
                    Toast('请把上述信息完善好')
                    return
                }
                console.log(params);
                http.postUserJsonData(`/user/job/save`, params, (data) => {
                    if (data) {
                        Toast('保存成功');
                        this.$router.push('/checkJobInfo');
                    }
                });
            },
            openWorkerTypePopup() {
                this.showWorkTypePopup = true;
            },

            renderPosition() {
                if (!this.form.province || !this.form.city || !this.form.area) return;
                if (Object.keys(this.provincesData[this.form.province]).length == 1) {
                    this.position = this.form.province + '/' + this.form.area;
                } else {
                    this.position = this.form.province + '/' + this.form.city + '/' + this.form.area;
                }
            },
            toggleWorkType(index) {
                this.$refs.workTypeCheckboxes[index].toggle();
                console.log(this.$refs.workTypeCheckboxes[index]);
            },
            saveWorkType() {
                this.cityArr = this.form.workType.join(',').slice(0, 10);
                if (this.form.workType.join(',').length > 10) {
                    this.cityArr = this.cityArr + '...'
                }
                this.showWorkTypePopup = false;
                this.getWorkCountArr();
            },
            getWorkCountArr() {
                let countArrIndex = [];
                this.form.workType.forEach((item) => {
                    countArrIndex.push(this.workType.indexOf(item));
                });
                this.form.workCount = [];
                countArrIndex.forEach((index) => {
                    this.form.workCount.push((this.workCountAyy[index] ? this.workCountAyy[index] : 0).toString());
                })
                console.log(this.form.workCount);
            },
            renderWorkType() {
                this.cityArr = this.form.workType.join(',').slice(0, 10);
                if (this.form.workType.join(',').length > 10) {
                    this.cityArr = this.cityArr + '...'
                }
                ;
                let countArrIndex = [];
                this.form.workType.forEach((item) => {
                    countArrIndex.push(this.workType.indexOf(item));
                });
                this.form.workCount.forEach((item, index) => {
                    console.log(item,index)
                    this.workCountAyy[countArrIndex[index]] = item;
                })
            },
        }
    }
</script>

